<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>确认订单</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/iconfont.css" rel="stylesheet">
<link href="css/reset.css" rel="stylesheet">
<link href="css/common.css" rel="stylesheet">
<link href="css/confirmorder.css" rel="stylesheet">
<script src="js/screenresize.js"></script>
</head>
<body>
    <!-- header 开始 -->
    <header>
        <div class="wrapper clearfix">
            <p><a class="goBack" href="#"><i class="iconfont icon-fanhui"></i>返回</a></p>
            <p><a href="#">确认订单</a></p>
        </div>
    </header>
    <!-- header 结束 -->
    <!-- cont 开始 -->
    <div class="cont">
        <div class="wrapper ">
            <div class="top">
                <p><i class="iconfont icon-dianpu"></i>特美特美妆专营店</p>
                <ul class="list">
                    <li>
                       <div class="picTxt clearfix">
                          <a href="#"><img class="fl" src="images/confirmorder-pic-0.png" alt=""></a>
                          <div class="fr txt">
                             <p class="descript">
                                <a href="#">丝塔芙(Cetaphil)温和洁润套装(洁面乳237ml+保湿润肤乳237ml+化妆包</a>
                             </p>
                             <div class="plusMinus">
                                 <span class="in-block iconfont icon-jianhao"></span><span class="num in-block">1</span><span class="in-block iconfont icon-jiahao"></span>
                             </div>
                             <div class="lastLine clearfix">
                                <span class="fl">￥<span>108</span></span>
                                <span class="btn iconfont icon-dayuhao fr"></span>
                             </div>
                          </div>
                       </div>
                    </li>
                </ul>
            </div>
            <div class="comm address">
                    <div class="site clearfix">
                        <p class="fl">收货地址</p>
                        <span class="fr iconfont icon-dayuhao"></span>
                    </div>
                    <p>河南郑州市高新区技术长春路冬青街电子商务产业园<br>3号楼一层云和数据<br><span>万明菊 151****2554</span>
                    </p>
            </div>
            <ul>
                <li class="comm clearfix">
                    <p class="fl">配送方式：送货上门<br>
                        <span>2016-05-08 09:00-15:00</span>
                    </p>
                    <span class="fr iconfont icon-dayuhao"></span>
                </li>
                <li class="comm clearfix">
                    <p class="fl">优惠券：优惠0.00元<br>
                        <span>无可用</span>
                    </p>
                    <span class="fr iconfont icon-dayuhao"></span>
                </li>
                <li class="comm clearfix">
                    <p class="fl">运费险：卖家赠送<br>
                        <span>若确认收货前退货，可获保险赔付</span>
                    </p>
                    <span class="fr iconfont icon-dayuhao"></span>
                </li>
            </ul>
            <div class="total">
                <p class="clearfix">
                    <span class="fl">商品总额</span>
                    <span class="fr">+￥59.00</span>
                </p>
                <p class="clearfix">
                    <span class="fl">优惠</span>
                    <span class="fr">-￥0.00</span>
                </p>  
                <p class="clearfix">
                    <span class="fl">邮费</span>
                    <span class="fr">+￥0.00</span>
                </p>
            </div>
            <div class="submit clearfix">
                <p class="fr">提交订单</p>
                <p class="fr">实付金额 ：<span>￥59</span></p>
            </div>
        </div>
    </div>
    <!-- cont 结束 -->
    <!-- footer 开始 -->
    <footer>
      <ul>
         <li>
            <a href="index.html"> <i class="iconfont icon-shouyeshouye"></i>
               <p>首页</p>
            </a>
         </li>
         <li>
            <a href="classify.html"> <i class="iconfont icon-fenlei"></i>
               <p>分类</p>
            </a>
         </li>
         <li>
            <a href="find.html">
               <i class="iconfont icon-faxian"></i>
               <p>发现</p>
            </a>
         </li>
         <li>
            <a href="shoppingCar.html">
               <i class="iconfont icon-gouwuche"></i>
               <p>购物车</p>
            </a>
         </li>
         <li>
            <a class="cur" href="myCenter.html">
               <i class="iconfont icon-iconfontwode"></i>
               <p>我的</p>
            </a>
         </li>
      </ul>
   </footer>
    <!-- footer 结束 -->
    <script src="lib/js/zepto.min.js"></script>
    <script src="lib/js/layer.min.js"></script>
    <script>
    // 返回上一步
    $('.goBack').click(function(){
        history.back();
    });
    //  确认提交订单
        $('.cont .submit').click(function(){
        //询问框
        layer.open({
            content: '确定提交吗？',
            btn: ['确定', '取消'],
            yes: function(index){
                var t = setTimeout(function(){
                    location.href = "orderDetail.html";
                    clearTimeout(t);
                },1000);
                layer.close(index);
            }
        });
    });
    //  实现加减
        (function(){
            var spans = $('.cont .plusMinus span');
            var price = $('.cont .lastLine span').eq(0).children();
            var i = spans.eq(1).text();
            var num ;
                spans.eq(0).click(function(){
                    i--;
                    if( i <=0){
                        i=1;
                    }
                    
                    price.text(num = i*108);
                    spans.eq(1).text(i);
                });
                spans.eq(2).click(function(){
                    i++;
                    price.text(num = i*108);
                    spans.eq(1).text(i);
                });
        })();
    </script>
</body>
</html>